<template>
	<div class="container">
		<div class="form">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
				<el-form-item label="客户编号" prop="cnumber">
					<el-col :span="17">
						<el-input v-model="ruleForm.cnumber" size="small" placeholder="请输入客户编号" @blur="cnumberBlur"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="全称" prop="name">
					<el-col :span="17">
						<el-input v-model="ruleForm.name" size="small" placeholder="请输入全称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="简称" prop="short_name">
					<el-col :span="17">
						<el-input v-model="ruleForm.short_name" size="small" placeholder="请输入客户简称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="机构性质" prop="scope">
					<el-select v-model="ruleForm.scope" placeholder="请选择" size="small">
						<el-option v-for="item in natureList" :key="item.id" :label="item.property" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="国家" prop="country">
					<el-select v-model="ruleForm.country" placeholder="请选择" size="small" clearable filterable>
						<el-option v-for="item in odata.country" :label="item[1]" :value="item[1]" :key="item[0]"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省份" prop="province" v-if="ruleForm.country == '中国'">
					<el-select v-model="ruleForm.province" placeholder="请选择" size="small" clearable filterable>
						<el-option v-for="item in odata.province" :label="item.name" :value="item.name" :key="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-col :span="17">
                        <el-input v-model="ruleForm.address" size="small" placeholder="请输入地址"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="公司邮箱" prop="email">
					<el-col :span="17">
                        <el-input v-model="ruleForm.email" size="small" placeholder="请输入公司邮箱"></el-input>
					</el-col>
				</el-form-item>
				<div class="subBtn">
					<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
				</div>	
			</el-form>
		</div>
	</div>
</template>

<script>
import odata from '../../assets/js/data.js'
export default {
	data() {
		return {
			odata: odata,
			ruleForm: {
				cnumber: '',
				name: '',
				short_name: '',
				scope: '',
				country: '',
				province: '',
				address: '',
				email: '',
			},
			natureList: [],
			rules: {
				cnumber: [{
					required: true,
					message: '请输入客户编号',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '请输入全称',
					trigger: 'blur'
				}],
				
			}
		}
	},

	created() {
		this.getNatureList()
	},

	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if(this.ruleForm.country != '中国'){
						this.ruleForm.province = ''
					}
					this.apiPost('Customer/customerAdd', this.ruleForm).then(res => {
						let remind = res.error ? 'error' : 'success'
						_g.toastMsg(remind, res.msg)
						if (!res.error) {
							router.replace('/customer/list')
						}
					})
				} else {
					return false;
				}
			});
		},

		resetForm(formName) {
			this.$refs[formName].resetFields();
		},

		getNatureList(){
			this.apiPost('System/getScope').then(res=>{
				this.natureList = res
			})
		},

		cnumberBlur(){
			if(this.ruleForm.cnumber){
				let data = {
					cnumber: this.ruleForm.cnumber
				}
				this.apiPost('system/checkCustomerCnumber', data).then(res=>{
					if(res){
						this.$alert('是否跳转到该客户详情', '客户编号已存在', {
							confirmButtonText: '确定',
							callback: action => {
								router.push('/customer/detail/'+res)
							}
						});
					}
				})
			}
		}
	},
}
</script>

<style scoped>
.container {
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	min-height: 100%;
	background: #fff;
}
.form{
	width: 500px;
	/* margin: 50px auto; */
}
.subBtn{
	text-align: center;
	margin-top: 30px;
}
</style>
